<!DOCTYPE html>
<html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>临窗旋墨文件</title>
    <link rel="icon" th:href="@{/assets/img/lcxm.ico}" type="image/ico">
    <link rel="stylesheet" type="text/css" th:href="@{/assets/bootstrap3.3.7/css/bootstrap.min.css}"/>
    <script type="text/javascript" th:src="@{/assets/js/jquery.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/jquery.form.js}"></script>
    <script type="text/javascript" th:src="@{/assets/bootstrap3.3.7/js/bootstrap.min.js}"></script>
    <script type="text/javascript">
        var ctx = "[[@{/}]]";
        $(function () {
            $(".submit").on("click", function () {
                var options = {
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                        after(data.code == 0, data.msg);
                    },
                    error: function (jqXHR, textStatus, errorMsg) { // 出错时默认的处理函数
                        after(false, "操作失败")
                    }
                }
                var $form = $("form");
                $form.ajaxSubmit(options);
            });
            list();

        });
        var template = `
		    	<div class="alert alert-dismissable">
                <button type="button" class="close" data-dismiss="alert"
                        aria-hidden="true">
                    &times;
                </button>
                <div class="msg">操作成功</div>
            </div>
		    `;

        function after(success, msg) {
            var $msg = $(template).addClass(success ? "alert-success" : "alert-danger");
            if (!success) {
                $(".msg", $msg).text(msg);
            } else {
                list();
            }
            $("form").before($msg);

        }

        var li = `
		    	<li class="list-group-item">
                 <span><a href="" download="download"></a></span>
                 <span style="margin-left:10px;">大小<span class="len"></span>KB</span>
                </li>
		    `;

        function list() {
            var url = ctx + "mineFile/list"
            $.ajax(url, {
                dataType: 'json',
                success: function (data) {
                    if (data.code != 0) return;
                    var list = data.data;
                    if (!list) return;
                    var $ul = $("ul");
                    $ul.html("");
                    list.forEach(function (item) {
                        var $li = $(li);
                        $("a", $li).attr("href", '/mineFile/download/' + item.name).text(item.name);
                        $(".len", $li).text(item.size);
                        $ul.append($li);
                    });

                }
            });
        }

    </script>

</head>

<body>
<div class="container">
    <hr/>
    <div class="row">
        <div class="col-sm-12 col-md-12 col-xs-12">

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        上传文件
                    </h3>
                </div>

                <div class="panel-body">

                    <form role="form" class="form-horizontal" action="/mineFile/upload" enctype="multipart/form-data"
                          method="post">

                        <div class="form-group">
                            <div class="col-sm-10 col-xs-10">
                                <input type="file" name="file"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-10 col-xs-10">
                                <button type="button" class="btn btn-default submit">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        下载列表
                    </h3>
                </div>
                <div class="panel-body">
                    <ul class="list-group">
                        <li class="list-group-item" th:each="item,iterInfo:${list}">
                            <span><a th:href="'/minefile/download/' + ${item.name}" download="download" 123
                                     th:text="${item.name}"></a></span>
                            <span th:text="'大小:'+ ${item.size} + 'KB'" style="margin-left:10px;"></span>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
</div>

</body>

</html>